import React from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Button, Form, Input, Select} from "antd";

const {Option} = Select;
const layout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 9 },
};


const WeiXin = () => {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log(values);
  };
  return (
    <PageContainer
      header={{
        title: '微信菜单',
        breadcrumb: {},
      }}
    >
      <div style={{background: "white", width: '100%'}}>
        <div style={{paddingTop: 20, paddingLeft: 100, paddingBottom: 20}}>
          <img style={{width: 320}} src="https://pro.crmeb.net/admin/view_admin/img/mobilehead.1c931282.png" alt=""/>
          <div style={{width: 320, height: 440, background: '#f4f5f9',position:"relative"}}>
            <div>
              <img style={{position:"absolute",top:431,left:80}} src="https://i.loli.net/2021/09/09/eOcbx9mkfPJoWQF.png" alt=""/>
              <Button style={{position:"absolute",top:380,left:43,background:'#ffffff',width: 92, height: 49,}}>测试</Button>
            </div>
            <div>
              <img style={{position:"absolute",top:431,left:173}} src="https://i.loli.net/2021/09/09/eOcbx9mkfPJoWQF.png" alt=""/>
              <Button style={{position:"absolute",top:380,left:135,background:'#ffffff',width: 92, height: 49,}}>测试</Button>

            </div>
            <div>
              <img style={{position:"absolute",top:431,left:263}} src="https://i.loli.net/2021/09/09/eOcbx9mkfPJoWQF.png" alt=""/>
              <Button style={{position:"absolute",top:380,left:227,background:'#ffffff',width: 92, height: 49,}}>测试</Button>
            </div>
          </div>
          <div style={{height: 50, width: 320, display: "flex"}}>
            <img src="https://i.loli.net/2021/09/07/dHnDAZjguMpNkKe.png" alt=""/>
            <Button style={{width: 91, height: 49}}>测试</Button>
            <Button style={{width: 91, height: 49}}>+</Button>
            <Button style={{width: 91, height: 49}}>+</Button>
          </div>
        </div>

        <div>
          <div style={{marginLeft: 70, marginBottom: 20, display: "flex"}}>
            <div style={{width: 110, borderBottom: "2px solid blue", textAlign: "center", lineHeight: 3}}>
              菜单信息
            </div>
            <div style={{borderBottom: "1px solid #dcdee2", width: 380}}>
              <Button style={{marginLeft: 314}} type="primary" danger>
                删除
              </Button>
            </div>
          </div>
          <div >
            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
              <Form.Item name="note" label="菜单名称" rules={[{required: true}]}>
                <Input/>
              </Form.Item>
              <Form.Item name="gender" label="规则状态"  rules={[{required: true}]}>
                <Select
                  // placeholder="Select a option and change input text above"
                  // onChange={onGenderChange}
                  // allowClear
                  defaultValue="male"
                >
                  <Option value="male">关键字</Option>
                  <Option value="female">跳转网页</Option>
                  <Option value="other">小程序</Option>
                </Select>
              </Form.Item>
              <Form.Item name="keyword" label="关键字" rules={[{required: true}]}>
                <Input/>
              </Form.Item>
            </Form>
          </div>

        </div>
        <div style={{width:'100%',textAlign:"center"}}>
          <Button style={{marginTop:50,marginBottom:20}} type="primary">保存并发布</Button>
        </div>
      </div>


    </PageContainer>
  );
}

export default WeiXin;

// <a href="https://sm.ms/image/NXLjv957ESq6Ofa" target="_blank"><img src="" ></a>
